{% extends "nav.html" %}
{% block little %}存储{{ storage.ST_ip }}{% endblock %}
{% block content %}
    <!-- Main Content -->
    <div class="container-fluid">
        <div class="side-body">
            <div class="page-title">
                <span class="title">日立存储详细信息</span>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <div class="card">
                        <div class="card-header">
                            <div class="card-title">
                                <div class="title">日立存储详细清单</div>
                            </div>
                        </div>
                        <div class="card-body no-padding">
                            <div role="tabpanel">
                                <!-- Nav tabs -->
                                <ul class="nav nav-tabs" role="tablist">
                                    <li role="presentation" class="active"><a href="#tab1" aria-controls="home" role="tab" data-toggle="tab" >存储基本信息</a></li>
                                    <li role="presentation"><a href="#tab2" aria-controls="tab" role="tab" data-toggle="tab" id="stroage_mess_yingshe">存储映射关系</a></li>
                                    <li role="presentation"><a href="#tab3" aria-controls="tab" role="tab" data-toggle="tab" id="stroage_mess_host">存储主机及主机组</a></li>
                                    <li role="presentation"><a href="#tab4" aria-controls="tab" role="tab" data-toggle="tab" id="stroage_mess_port">存储端口及端口组</a></li>
                                    <li role="presentation"><a href="#tab5" aria-controls="tab" role="tab" data-toggle="tab" id="stroage_mess_lun">存储lun及lun组</a></li>
                                    <li role="presentation"><a href="#tab6" aria-controls="tab" role="tab" data-toggle="tab" id="stroage_mess_disk">存储硬盘信息</a></li>
                                    {#                                    <li role="presentation"><a href="#tab7" aria-controls="tab" role="tab" data-toggle="tab">存储raid信息</a></li>#}
                                    <li role="presentation"><a href="#tab8" aria-controls="tab" role="tab" data-toggle="tab">存储故障表</a></li>
                                    <li role="presentation"><a href="#tab9" aria-controls="tab" role="tab" data-toggle="tab" id="stroage_mess_work">存储实施情况</a></li>
                                </ul>
                                <!-- Tab panes -->
                                <div class="tab-content">
                                    <div role="tabpanel" class="tab-pane active" id="tab1">
                                        <table width="1000"  class="table  table-bordered">
                                            <tr>
                                                <td id="storage_id">{{ storage.id }}</td>
                                                <td>存储厂商：{{ storage.ST_prodname }}</td>
                                                <td>存储型号：{{ storage.ST_prodect }}</td>
                                                <td>存储SN:{{ storage.ST_sn }}</td>
                                                <td>存储IP：{{ storage.ST_ip }}</td>

                                            </tr>
                                            <tr>
                                                <td>存储微码：{{ storage.ST_firmware }}</td>
                                                <td>硬盘数量：</td>
                                                <td>裸容量：{{ storage.ST_totalrawcap }}T</td>
                                                <td>已用容量：{{ storage.ST_usecap }}GB</td>
                                                <td>可用容量:{{ storage.ST_availcap }}GB</td>
                                            </tr>
                                            <tr>
                                                <td>更新时间：{{ storage.ST_updatetime }}</td>
                                                <td>启用时间：{{ storage.ST_starttime }}</td>
                                                <td>关闭时间：{{ storage.ST_endtime }}</td>
                                                <td>硬盘数量：{{ disk | length }}</td>
                                                <td>&nbsp;</td>
                                            </tr>
                                            <tr>
                                                <td>&nbsp;</td>
                                                <td>&nbsp;</td>
                                                <td>&nbsp;</td>
                                                <td>&nbsp;</td>
                                                <td>&nbsp;</td>
                                            </tr>
                                        </table>
                                    </div>
                                    <div role="tabpanel" class="tab-pane" id="tab2">
                                        <table class="table  table-bordered">
                                            <thead>
                                            <tr>
                                                {#                        <th>id</th>#}
                                                <th style="width: 10%">ID</th>
                                                <th style="width: 20%">业务系统名称</th>
                                                <th style="width: 20%">端口</th>
                                                <th style="width: 20%">主机组</th>
{#                                                <th style="width: 20%">LUN</th>#}
                                                <th style="width: 10%">已用容量(GB)</th>
                                            </tr>
                                            </thead>
                                            <tbody id="storage_stmap_data">
                                            {#                                            {% for i in map %}#}
                                            {#                                                {% if i.manyhost.all %}#}
                                            {#                                                    <tr>#}
                                            {#                                                        <td>{{ i.id }}</td>#}
                                            {#                                                        <td><h class="st_app_text" id="st_app_text">{{ i.app }}</h>#}
                                            {#                                                            {% if perms.STMAP %}#}
                                            {#                                                                <a type="button" nid="{{ i.id }}" class="btn btn-warning btn-xs st_sel_modfiy st_a_modfiy" id= "st_a_modfiy" style="margin: 0px 0px;top: 0px;float: right" >修  改</a>#}
                                            {#                                                            {% endif %}#}
                                            {#                                                        </td>#}
                                            {#                                                    <td>#}
                                            {#                                                        {% for z in i.manyhost.all %}#}
                                            {#                                                        {{ z.Notes }}#}
                                            {#                                                    {% endfor %}</td>#}
                                            {#                                                        <td>{{ i.mapname }}</td>#}
                                            {#                                                        <td>{{ i.totalcap }}</td>#}
                                            {#                                                    </tr>#}
                                            {#                                                {% endif %}#}
                                            {#                                            {% endfor %}#}
                                            </tbody>
                                        </table>
                                    </div>
                                    <div role="tabpanel" class="tab-pane" id="tab3">
                                        <table class="table  table-bordered">
                                            <thead>
                                            <tr>
                                                <th>id</th>
                                                <th>主机</th>
                                                <th>所属端口</th>
                                                <th>主机wwn</th>
                                                <th>连接光交</th>
                                                <th>发送流量</th>
                                                <th>接收流量</th>
                                                <th>对应主机</th>
                                                <th>对应主机业务</th>
                                            </tr>
                                            </thead>
                                            <tbody id="storage_host">


                                            </tbody>
                                        </table>
                                    </div>
                                    <div role="tabpanel" class="tab-pane" id="tab4">
                                        <table class="table  table-bordered">
                                            <thead>
                                            <tr>
                                                <th>id</th>
                                                <th>端口</th>
                                                <th>端口wwn</th>
                                                <th>端口发送流量</th>
                                                <th>端口接收流量</th>
                                                <th>所接光交</th>
                                            </tr>
                                            </thead>
                                            <tbody id="storage_port">
                                            {#                                            {% for i in port %}#}
                                            {#                                                <tr>#}
                                            {#                                                    <td>{{ i.id }}</td>#}
                                            {#                                                    <td>{{ i.portname }}</td>#}
                                            {#                                                    <td>{{ i.wwn }}</td>#}
                                            {#                                                    <td>{{  i.wwn.Sanport_wwn.rx}}</td>#}
                                            {#                                                    <td>{{ i.wwn.Sanport_wwn.tx }}</td>#}
                                            {#                                                    <td>{{ i.wwn.Sanport_wwn.san }}  {{ i.wwn.Sanport_wwn.slot }}-{{ i.wwn.Sanport_wwn.port }}</td>#}
                                            {#                                                </tr>#}
                                            {#                                            {% endfor %}#}
                                            </tbody>
                                        </table>
                                    </div>
                                    <div role="tabpanel" class="tab-pane" id="tab5">
                                        <table class="table  table-bordered">
                                            <thead>
                                            <tr>
                                                <th>id</th>
                                                <th>LUN信息</th>
                                                <th>LUN大小(GB)</th>
                                                <th>所属主机组</th>
                                                <th>所属资源池</th>
                                            </tr>
                                            </thead>
                                            <tbody id="storage_lun">
                                            {#                                            {% for i in lun %}#}
                                            {#                                                <tr>#}
                                            {#                                                    <td>{{ i.id }}</td>#}
                                            {#                                                    <td>{{ i.lunpname }}</td>#}
                                            {#                                                    <td>{{ i.lunsize }}</td>#}
                                            {#                                                    <td>{{ i.STMAP_set }}{% for k in i.stmap_set.all %}#}
                                            {#                                                        {{ k.mapname }}#}
                                            {#                                                    {% endfor %}#}
                                            {#                                                    </td>#}
                                            {#                                                    <td>{{ i.Notes }}</td>#}
                                            {#                                                </tr>#}
                                            {#                                            {% endfor %}#}
                                            </tbody>
                                        </table>
                                    </div>
                                    <div role="tabpanel" class="tab-pane" id="tab6">
                                        <table class="table  table-bordered">
                                            <thead>
                                            <tr>
                                                <th>硬盘槽位</th>
                                                <th>硬盘容量</th>
                                                <th>硬盘所属raid组</th>
                                                <th>硬盘类型</th>
                                                <th>硬盘状态</th>
                                                <th>硬盘使用情况</th>
                                            </tr>
                                            </thead>
                                            <tbody id="storage_disk">
                                            {#                                            {% for i in disk %}#}
                                            {#                                                <tr>#}
                                            {#                                                    <td>{{ i.diskslot }}</td>#}
                                            {#                                                    <td>{{ i.disksize }}</td>#}
                                            {#                                                    <td>{{ i.disknote }}</td>#}
                                            {#                                                    <td>{{ i.datatype }}</td>#}
                                            {#                                                    <td>{{ i.diskstatus }}</td>#}
                                            {#                                                    <td>{{ i.status }}</td>#}
                                            {##}
                                            {#                                                </tr>#}
                                            {#                                            {% endfor %}#}
                                            </tbody>
                                        </table>
                                    </div>
                                    {#                                    <div role="tabpanel" class="tab-pane" id="tab7">#}
                                    {#                                        <table class="table  table-bordered">#}
                                    {#                                            <thead>#}
                                    {#                                            <tr>#}
                                    {#                                                <th>raid组名称</th>#}
                                    {#                                                <th>raid组大小</th>#}
                                    {#                                                <th>raid组使用容量</th>#}
                                    {#                                                <th>raid组剩余容量</th>#}
                                    {#                                                <th>rraid组LUn信息</th>#}
                                    {#                                            </tr>#}
                                    {#                                            </thead>#}
                                    {#                                            <tbody>#}
                                    {#                                            <tr>#}
                                    {#                                                <td>raid13</td>#}
                                    {#                                                <td>1.6T</td>#}
                                    {#                                                <td>1.3T</td>#}
                                    {#                                                <td>0.4T </td>#}
                                    {#                                                <td>lun data 1 lundata2</td>#}
                                    {#                                            </tr>#}
                                    {#                                            </tbody>#}
                                    {#                                        </table>#}
                                    {#                                    </div>#}
                                    <div role="tabpanel" class="tab-pane" id="tab8">
                                        <table class="table  table-bordered">
                                        </table>
                                    </div>
                                    <div role="tabpanel" class="tab-pane" id="tab9">
                                        <table class="table  table-bordered">
                                            <thead>
                                            <tr>
                                                <th>需求时间</th>
                                                <th>需求容量</th>
                                                <th>容量说明</th>
                                                <th>需求说明</th>
                                                <th>完成时间</th>
                                            </tr>
                                            </thead>
                                            <tbody id="storage_work">
                                            {#                                            {% for i in work %}#}
                                            {#                                                <tr>#}
                                            {#                                                    <td>{{ i.WO_time }}</td>#}
                                            {#                                                    <td>{{ i.WO_CAP }}</td>#}
                                            {#                                                    <td>{{ i.WO_CAPname }}</td>#}
                                            {#                                                    <td>{{ i.WO_text }} </td>#}
                                            {#                                                    <td>{{ i.WO_fishtime }}</td>#}
                                            {#                                                </tr>#}
                                            {#                                            {% endfor %}#}
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block js %}
    <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel " id="st_app_modfiy">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="gridSystemModalLabel">请输入需要修改的业务名称</h4>
                </div>
                <div class="modal-body">
                    <div class="row">

                        <div class="col-sm-12">
                            <p id="st_id"></p>
                            <input type="text" class="form-control" id="inputEmail3" placeholder="请输入业务名称">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default st_close" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="st_save">保 存</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <script>
        $(".st_a_modfiy").click(function () {
            $('#st_app_modfiy').modal({backdrop: 'static', keyboard: false},'toggle')
            nid = $(this).attr("nid")
            {#            $("#inputEmail3").val($(".st_app_text").text())#}
        });
        $("#st_save").click(function () {
            text = $("#inputEmail3").val()
            $.ajax({
                url: "{% url "storage_app_modfiy" %}",
                type: 'POST',
                data:{"id":nid,"text":text},
                success: function(data){
                    var obj = JSON.parse(data);
                    if(obj.status){
                        location.reload();
                    }else{
                        alert("error")
                    };
                }
            });
        });




        $("#stroage_mess_yingshe").click(function () {
            var id = $("#storage_id").text()
            $("#storage_stmap_data").empty()
            $('#waitting').modal({backdrop: 'static', keyboard: false},'toggle')
            $.ajax({
                url: "{% url "storage_stmap_rili_ajax" %}",
                type: 'POST',
                data:{"id":id},
                success: function(data){
                    var obj = JSON.parse(data);
                    if(obj.status){
                        $("#storage_stmap_data").append(obj.data)
                        console.log(obj.data)
                        $('#waitting').modal('hide')
                    }else{
                        alert("error")
                        $('#waitting').modal('hide')
                    };
                }
            });
        });
        $("#stroage_mess_host").click(function () {
            var id = $("#storage_id").text()
            $("#storage_host").empty()
            $('#waitting').modal({backdrop: 'static', keyboard: false},'toggle')
            $.ajax({
                url: "{% url "stroage_mess_host_rili_ajax" %}",
                type: 'POST',
                data:{"id":id},
                success: function(data){
                    var obj = JSON.parse(data);
                    if(obj.status){
                        $("#storage_host").append(obj.data)
                        console.log(obj.data)
                        $('#waitting').modal('hide')
                    }else{
                        alert("error")
                        $('#waitting').modal('hide')
                    };
                }
            });
        });
        $("#stroage_mess_lun").click(function () {
            var id = $("#storage_id").text()
            $("#storage_lun").empty()
            $('#waitting').modal({backdrop: 'static', keyboard: false},'toggle')
            $.ajax({
                url: "{% url "storage_lun_rili_ajax" %}",
                type: 'POST',
                data:{"id":id},
                success: function(data){
                    var obj = JSON.parse(data);
                    if(obj.status){
                        $("#storage_lun").append(obj.data)
                        console.log(obj.data)
                        $('#waitting').modal('hide')
                    }else{
                        alert("error")
                        $('#waitting').modal('hide')
                    };
                }
            });
        });
        $("#stroage_mess_disk").click(function () {
            var id = $("#storage_id").text()
            $("#storage_disk").empty()
            $('#waitting').modal({backdrop: 'static', keyboard: false},'toggle')
            $.ajax({
                url: "{% url "storage_disk_ajax" %}",
                type: 'POST',
                data:{"id":id},
                success: function(data){
                    var obj = JSON.parse(data);
                    if(obj.status){
                        $("#storage_disk").append(obj.data)
                        console.log(obj.data)
                        $('#waitting').modal('hide')
                    }else{
                        alert("error")
                        $('#waitting').modal('hide')
                    };
                }
            });
        });
        $("#stroage_mess_raid").click(function () {
            var id = $("#storage_id").text()
            $("#storage_raid").empty()
            $('#waitting').modal({backdrop: 'static', keyboard: false},'toggle')
            $.ajax({
                url: "{% url "storage_raid_ajax" %}",
                type: 'POST',
                data:{"id":id},
                success: function(data){
                    var obj = JSON.parse(data);
                    if(obj.status){
                        $("#storage_raid").append(obj.data)
                        console.log(obj.data)
                        $('#waitting').modal('hide')
                    }else{
                        alert("error")
                        $('#waitting').modal('hide')
                    };
                }
            });
        });
        $("#stroage_mess_work").click(function () {
            var id = $("#storage_id").text()
            $("#storage_work").empty()
            $('#waitting').modal({backdrop: 'static', keyboard: false},'toggle')
            $.ajax({
                url: "{% url "storage_work_ajax" %}",
                type: 'POST',
                data:{"id":id},
                success: function(data){
                    var obj = JSON.parse(data);
                    if(obj.status){
                        $("#storage_work").append(obj.data)
                        console.log(obj.data)
                        $('#waitting').modal('hide')
                    }else{
                        alert("error")
                        $('#waitting').modal('hide')
                    };
                }
            });
        });
        $("#stroage_mess_port").click(function () {
            var id = $("#storage_id").text()
            $('#waitting').modal({backdrop: 'static', keyboard: false},'toggle')
            $("#storage_port").empty()
            $.ajax({
                url: "{% url "storage_port_ajax" %}",
                type: 'POST',
                data:{"id":id},
                success: function(data){
                    var obj = JSON.parse(data);
                    if(obj.status){
                        $("#storage_port").append(obj.data)
                        console.log(obj.data)
                        $('#waitting').modal('hide')
                    }else{
                        alert("error")
                        $('#waitting').modal('hide')
                    };
                }
            });
        });
    </script>
{% endblock %}